<template>
  <div
    ref="barchart"
    class="bar-chart"
    style="width: 100%; margin-top: 20px"
  ></div>
</template>

<script>
import { title } from "@/settings";
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {},
    },
    stype: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chart: null,
      title: "",
      barIndex: "",
      data1: [],
      data2: [],
      clickFlag: true,
      barChartDataUrl: "",
    };
  },
  watch: {
    chartData() {
      this.initChart();
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.barchart);
      let option = this.getOption();
      this.chart.setOption(option);
      var autoHeight = option.yAxis.data.length * 50 + 150;
      this.chart.getDom().style.height = autoHeight + "px";
      this.chart.getDom().childNodes[0].style.height = autoHeight + "px";
      this.chart
        .getDom()
        .childNodes[0].childNodes[0].setAttribute("height", autoHeight);
      this.chart.getDom().childNodes[0].childNodes[0].style.height =
        autoHeight + "px";
      this.chart.resize();
      this.barChartDataUrl = this.chart.getDataURL();
      this.chart.off("click");
      this.chart.on("click", (param) => {
        if (param.componentType === "yAxis" && this.clickFlag === true) {
          this.$emit("updateOrgBarData", param.dataIndex);
          console.log(param);
        }
      });
    },
    getOption() {
      let option = {
        title: {
          show: true, //false
          text: this.title, //主标题文本
          left: "center",
          textStyle: {
            fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
            fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
            fontFamily: "sans-serif", //'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
            // 'Microsoft YaHei'(微软雅黑) ，文字字体
            fontSize: 18, //字体大小
            lineHeight: 18, //字体行高
          },
        },
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          left: "right",
          icon: "rect",
          itemWidth: 25, // 设置宽度
          itemHeight: 15, // 设置高度
          itemGap: 20, // 设置间距
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: this.chartData.orgDataList,
          triggerEvent: true,
          axisLabel: {
            show: true,
            interval: 0,
          },
        },
        // dataZoom: [
        //   {
        //     //  start: 0, //默认为0
        //     //  end: 100, //默认为100
        //     type: "slider",
        //     maxValueSpan: 9, //显示数据的条数(默认显示10个)
        //     show: true,
        //     yAxisIndex: [0],
        //     handleSize: 0, //滑动条的 左右2个滑动条的大小
        //     height: "80%", //组件高度
        //     left: 600, //左边的距离
        //     right: 8, //右边的距离
        //     top: 50, //上边边的距离
        //     borderColor: "#0e426c",
        //     //   fillerColor: "#1b579e", //滑动块的颜色
        //     fillerColor: "#1890ff", //滑动块的颜色
        //     backgroundColor: "#0e426c", //两边未选中的滑动条区域的颜色
        //     showDataShadow: false, //是否显示数据阴影 默认auto
        //     showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
        //     realtime: true, //是否实时更新
        //     filterMode: "filter",
        //     yAxisIndex: [0, 1], //控制的y轴
        //     brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
        //   },
        // ],
        series: [
          {
            name: "行政",
            type: "bar",
            stack: "total",
            barMaxWidth: 80,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return "";
                  }
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.chartData.adminDataList,
          },
          {
            name: "单列",
            type: "bar",
            stack: "total",
            barMaxWidth: 80,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return "";
                  }
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.chartData.singleDataList,
          },
          {
            name: "工勤",
            type: "bar",
            stack: "total",
            barMaxWidth: 80,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return "";
                  }
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.chartData.workDataList,
          },
          {
            name: "事业",
            type: "bar",
            stack: "total",
            barMaxWidth: 80,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return "";
                  }
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.chartData.causeDataList,
          },
        ],
      };

      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
